 let suggestContainer = document.getElementsByClassName("suggest")[0];
    let searchInput = document.getElementsByClassName("search-input-text")[0];
    let bgDiv = document.getElementsByClassName("bgDiv")[0];
    let searchResult = document.getElementById("search-result");

    // 清除建议框内容
    function clearContent() {
        let size = searchResult.childNodes.length;
        for (let i = size - 1; i >= 0; i--) {
            searchResult.removeChild(searchResult.childNodes[i]);
        }
    }
    let timer = null;
    // 注册输入框键盘抬起事件
    searchInput.onkeyup = function (e) {
        suggestContainer.style.display = "block";
        // 如果输入框内容为空 清除内容且无需跨域请求
        if (this.value.length === 0) {
            clearContent();
            return;
        }
        if (this.timer) {
            clearTimeout(this.timer);
        }
        if (e.keyCode !== 40 && e.keyCode !== 38) {
            // 函数节流优化
            this.timer = setTimeout(() => {
                // 创建script标签JSONP跨域
                let script = document.createElement("script");
                script.src = "https://www.baidu.com/su?&wd=" + encodeURI(this.value.trim()) +
                    "&p=3&cb=handleSuggestion";
                document.body.appendChild(script);
            }, 130)
        }
    };
    //跳转到百度页面搜索
    function jumpPage() {
        window.open(`https://www.baidu.com/s?word=${encodeURI(searchInput.value)}`)
    }
    // 回调函数处理返回值
    function handleSuggestion(res) {
        // 清空之前的数据！！
        clearContent();
        let result = res.s;
        // 截取前五个搜索建议项
        if (result.length > 4) {
            result = result.slice(0, 10)
        }
        for (let i = 0; i < result.length; i++) {
            // 动态创建li标签
            let liObj = document.createElement("li");
            liObj.innerHTML = result[i];
            searchResult.appendChild(liObj);
        }
        // 自执行匿名函数--删除用于跨域的script标签
        (function () {
            let s = document.querySelectorAll('script');
            for (let i = 1, len = s.length; i < len; i++) {
                document.body.removeChild(s[i]);
            }
        })();
    }

    // 事件委托 点击li标签或者点击搜索按钮跳转到百度搜索页面
    bgDiv.addEventListener("click", function (e) {
        if (e.target.nodeName.toLowerCase() === 'li') {
            searchInput.value = e.target.innerText;
            jumpPage();
        } else if (e.target.id === 'btn') {
            jumpPage();
        }
    }, false);
    //声明变量并赋值
    let i = 0;
    let flag = 1;
    // 事件委托 监听键盘事件
    bgDiv.addEventListener("keydown", function (e) {
        let size = searchResult.childNodes.length;
        if (e.keyCode === 13) {
            jumpPage();
        }
        // 键盘向下事件
        if (e.keyCode === 40) {
            if (flag === 0) {
                i = i + 2;
            }
            flag = 1;
            e.preventDefault();
            if (i >= size) {
                i = 0;
            }
            if (i < size) {
                searchInput.value = searchResult.childNodes[i++].innerText;
            }
        }
        // 键盘向上事件
        if (e.keyCode === 38) {
            if (flag === 1) {
                i = i - 2;
            }
            flag = 0;
            e.preventDefault();
            if (i < 0) {
                i = size - 1;
            }
            if (i > -1) {
                searchInput.value = searchResult.childNodes[i--].innerText;
            }
        }
    }, false);
    // 点击页面任何其他地方 搜索结果框消失
    document.onclick = () => clearContent()